<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>个人博客 * 文章</title>
    <link rel="icon" href="/images/logo.ico"/>
    <link rel="stylesheet" href="/lib/animate/animate.min.css"/>
    <link rel="stylesheet" href="/css/me.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <link rel="stylesheet" href="/lib/editormd/css/editormd.preview.css"/>
    <link rel="stylesheet" href="/lib/typo/typo.css"/>
    <link rel="stylesheet" href="/lib/prism/prism.css"/>
    <link rel="stylesheet" href="/lib/semantic/semantic.min.css">
    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"  media="none" onload="this.media='all'"> -->
    <style>
        /*目录按钮样式*/
        .esa-toolbar .contents {
            position: absolute !important;
            cursor: pointer !important;
            bottom: 0 !important;
            right: 0 !important;
            height: 50px !important;
            width: 50px !important;
            text-align: center !important;
            line-height: 50px !important;
            z-index: 0 !important;
            border-radius: 4px !important;
            box-shadow: 0 2px 4px 1px rgb(0 0 0 / 20%) !important;
            background-color: #ffffff !important;
            transition: all .3s ease !important;
        }

        .esa-toolbar :hover {
            box-shadow: 0 2px 4px 1px rgb(0 0 0 / 20%) !important;
            background-color: #4da440 !important;
            transition: all .3s ease !important;
        }

        .fa :hover {
            box-shadow: 0 2px 4px 1px rgb(0 0 0 / 20%);
            background-color: #ffffff !important;
            transition: all .3s ease !important;
        }

        .fa {
            display: inline-block !important;
            font-size: inherit !important;
            text-rendering: auto !important;
            -webkit-font-smoothing: antialiased !important;
            -moz-osx-font-smoothing: grayscale !important;
        }

        .markdown-toc-list {
            line-height: 2.0 !important;
        }

        .markdown-toc-list a {
            font-size: large !important;
            font-weight: lighter !important;
            color: #252525 !important;
            text-decoration: none !important;
        }

        .markdown-toc-list a {
            color: #252525 !important;
            text-decoration: none !important;
        }

        .markdown-toc-list a:hover {
            color: #ba2636 !important;
            text-decoration: underline !important;
        }

        /*----------------------*/
    </style>
</head>
<body class="m-back-img2">
<nav class="animated fadeInDown m-back-grass m-fixed-w">
    <div class="ui container">
        <div class="ui inverted secondary stackable  menu">  <!--stackable 可堆叠的 应用在移动端-->
            <h2 class="ui white header item"><a href="/">个人博客</a></h2>
            <a href="/" class="nav_item item m-mobile-hide"><i
                        class="home icon"></i>首页</a>
            <a href="/p/types.html" class="nav_item item m-mobile-hide"
            ><i class="idea icon"></i>分类</a>
            <a href="/p/tags.html" class="nav_item item m-mobile-hide">
                <i class="tags icon"></i>标签</a>
            <a href="/p/archives.html" class="nav_item item m-mobile-hide"><i class="clone icon"></i>归档</a>
            <a href="/p/guestbook.html" class="nav_item item m-mobile-hide">
                <i class="comments outline icon"></i>留言板</a>
            <!-- <a href="/p/about.html" class="nav_item item m-mobile-hide"><i
                        class="info icon"></i>关于我</a> -->
            <div class=" m-mobile-hide m-search">
                <i class="search line icon funIcon"></i>
                <i class="close line icon funIcon no "></i>
                <form content="m-mobile-show" action="#" th:action="@{/search}" name="search">
                    <div class="m-form">
                        <input type="text" name="query" placeholder="快来找你要的东东ヾ(≧▽≦*)o" required="required">
                        <i onclick="document.forms['search'].submit()" class="search link icon s-icon"></i>
                    </div>
                </form>
            </div>
            <div class="nav_search right item no">
                <form name="search" action="#" th:action="@{/search}" method="post" target="_blank">
                    <div class="ui icon inverted transparent input m-margin-tb-tiny">
                        <input id="query" type="text" name="query" placeholder="Search....">
                        <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <span id="menu_toggle" class="ui black button m-mobile-show m-top-right ">
        <i class="sidebar icon"></i>
    </span>
</nav>
<!--top attached 完整拼接成一个相连区域 bottom attached-->
<!--中间内容-->
<div id="waypoint"
     class="line-numbers m-container m-padded-tb-2em m-padded-top-7em  m-mobile-top-15px m-opacity-small">
    <div class="ui container">
        <div class="ui top attached segment ">
            <div class="ui horizontal link list animated flipInX">
                <div class="item ">
                    <img id="blog-user-avatar" src="" alt=""
                         class="ui avatar image">
                    <!--在后面添加一些文字 content-->
                    <div class="content">
                        <a id="blog-user-nickname" class="header">
                            赵睿宇
                        </a>
                    </div>
                </div>
                <div class="item">
                    <i class="calendar icon"></i><span id="blog-updateTime">2017-10-01</span>
                </div>
                <div class="item">
                    <i class="eye icon"></i><span id="blog-views">2342</span>
                </div>
                <input id="blogInfo-user-email" type="hidden">
            </div>
        </div>
        <div class="ui attached segment">
            <!-- fluid 让整个自适应-->
            <img id="blog-firstPicture" src="" style="min-height: 300px; max-height: 600px;"
                 class="ui fluid rounded image">
        </div>
        <div class="ui  attached padded segment">
            <!--   内容-->
            <div class="ui right aligned basic segment">
                <div id="blog-flag" class="ui orange basic label">原创</div>
            </div>
            <h2 id="blog-title" class="ui center aligned header">题目加载中...</h2>

            <div id="markdown-toc-list" class=" animated fadeIn" style="width: 240px;
                    height: 100%;
                 position: fixed;
                 top: 5em;
                 right: 0;
                 overflow: hidden;
                 background: #fff;
                 z-index: 1000;
                 padding: 13px;
                 border: 1px solid #ddd;
                 border-top: none;
                 border-bottom: none;
                 ">
                <h1>内容目录</h1>
                <div style=" white-space: nowrap;
        overflow: hidden;padding: 5px 0;" class="markdown-body editormd-preview-container" id="custom-toc-container">
                    #custom-toc-container
                </div>
            </div>
            <div class="esa-toolbar">
                <span class="contents contents-show" title="阅读目录"><i class="fa fa-list-ul"></i></span>
            </div>
            <div id="editormd-view"
                 class="typo typo-selection m-padded-lr-responsive m-padded-tb-2em m-padded-lr-responsive">
            <textarea id="content" style="display:none;">
                    # MY BABY
                    ### 文章内容
                </textarea>
            </div>

            <!-- 标签-->
            <div id="tags" class="m-padded-lr-responsive m-padded-tb-2em">
                <!-- <div class="ui basic teal left pointing label" >  方法论 </div>-->
            </div>

            <div class="ui attached positive message">
                <!--            博客信息-->
                <div class="ui middle aligned grid">
                    <div class="eleven wide column">
                        <ui class="list">
                            <li>作者：<span id="blogInfo-user-nickname2"></span><a
                                        href="#"
                                        th:href="@{/about}"
                                        target="_blank"></a>
                            </li>
                            <li>发表时间：<span id="blogInfo-createTime"
                                >2021-8-27 07：48</span>
                            </li>
                            <li>更新时间：<span id="blogInfo-updateTime"
                                >2021-8-27 07：48</span>
                            </li>
                            <li id="blogInfo-shareText">版权声明：自由转载-非商用-保持署名- (创意共享3.0)</li>
                        </ui>

                    </div>
                    <div class="five wide column">
                        <img src="/images/可爱.gif" alt=""
                             class="ui right floated rounded border image"
                             width="130">
                    </div>
                </div>
            </div>
        </div>
        <div class="ui bottom attached segment">
            <!--            留言区-->
            <div id="comment-form" class="ui form">
                <input type="hidden" name="blog.id">
                <input type="hidden" name="parentComment.id" value="">
                <input type="hidden" name="parentComment.email" value="">
                <input type="hidden" name="login" value="false">
                <div class="field">
                    <textarea name="content"
                              placeholder="评论千万条，友善第一条"></textarea>
                </div>
                <div class="fields">
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <div class="ui left icon input">
                            <img id="avatar" src="/images/avatar/2.png" class="ui mini circular image"
                                 style="margin: 5px 0px;">
                        </div>
                    </div>
                    <div id="div-QQ" class="field m-mobile-wide m-margin-bottom-small">
                        <div class="ui left icon input">
                            <i class="qq icon"></i>
                            <input id="QQ" type="text" name="qq"
                                   placeholder="输入qq号自动获取昵称头像">
                        </div>
                    </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input type="text" name="nickname"
                                   placeholder="昵称(必填)">
                        </div>
                    </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <div class="ui left icon input">
                            <i class="mail icon"></i>
                            <input type="text" name="email" placeholder="邮箱(将保密)">
                        </div>
                    </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <button id="commentpost-btn" class="ui blue button m-mobile-wide"><i
                                    class="edit icon"></i>发布
                        </button>
                    </div>
                </div>

                <div class="ui error message">
                    <div class="header">输入错误</div>
                    <p>你只能用指定的邮箱注册</p>
                </div>

            </div>
            <!--            留言区-->
            <div class="ui teal segment">
                <div id="comment-container" class="ui threaded comments" style="max-width: 100%;">
                    <h3 id="comment-before" class="ui dividing header">评论</h3>
                    <!--            留言内容-->
                </div>
            </div>
        </div>
    </div>
</div>
<!--底部footer-->
<footer class="ui inverted vertical segment m-padded-tb-massive m-padded-top">
    <!--    居中-->
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="/images/weixin.png" class="ui rounded image"
                             alt="" width="110px">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">推荐博客</h4>
                <div id="recommends" class="ui inverted link list m-text-thin m-text-spaced">
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">联系我</h4>
                <div class="ui inverted link list m-text-thin m-text-spaced">
                    <a href="#" class="item">Email：123456@qq.com</a>
                    <a href="#" class="item">QQ:123456789</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">Blog</h4>
                <p class="m-text-thin m-text-spaced m-opacity">
                    这厮我的个人博客，会分享关于编程，思考，随笔相关的内容，欢迎大家访问，希望可以给到这的人有所帮助...
                </p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
    </div>

    <div class="ui center aligned container m-font-size">本站😉已运行✌[<span id="span_dt_dt"></span> ]
    </div>
    <!--    居中-->
    <div class="ui center aligned container m-padded-tb-small">
        <p class="m-text-thin m-text-spaced" style="color: whitesmoke">Copyright © 2021-2022  , All rights
            reserved.
        </p>
        <div>
            <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode="
               style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img
                    src="https://beian.mps.gov.cn/favicon.ico" style="float:left;">
                <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#ff1c04;">京ICP备
                    XXXXXXXXXX号</p></a>
        </div>
    </div>
    <div class="back-enter">
        <a href="/back/index.html" title="看看后门"><i class="sign in alternate icon"></i></a>
    </div>
    <meting-js
            server="netease"
            type="playlist"
            id="6859965088"
            mini="true"
            artist="rainymood"
            fixed="true">
    </meting-js>
</footer>
</body>
<!-- 代码高亮渲染 -->
<script type="text/javascript">
    window.Prism = window.Prism || {};
    window.Prism.manual = true;
</script>
<!-- jquery -->
<script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery.cookie.js"></script>
<!-- semantic-ui-->
<script type="text/javascript" src="/lib/semantic/semantic.min.js"></script>
<!--editormd-->
<script src="/lib/editormd/lib/prettify.min.js"></script>
<script src="/lib/editormd/lib/raphael.min.js"></script>
<script src="/lib/editormd/lib/underscore.min.js"></script>
<script src="/lib/editormd/lib/sequence-diagram.min.js"></script>
<script src="/lib/editormd/lib/flowchart.min.js"></script>
<script src="/lib/editormd/lib/jquery.flowchart.min.js"></script>
<script src="/lib/editormd/lib/marked.min.js"></script>
<!-- layer -->
<script type="text/javascript" src="/lib/layer/layer.js"></script>
<script type="text/javascript" src="/lib/editormd/editormd.min.js"></script>

<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.3/jquery.scrollTo.min.js"></script>-->

<script type="text/javascript" src="/lib/prism/prism.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/showTime.js"></script>
<script type="text/javascript" src="/js/comment.js"></script>
<!-- require APlayer -->
<!--<script async="async" type="text/javascript" src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>-->
<!-- require MetingJS -->
<!--<script async="async" type="text/javascript" src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>-->
<script type="text/javascript">

    //关于侧边栏目录的
    $(".contents-show").click(function () {
        $("#markdown-toc-list").toggleClass("no");
        $("#markdown-toc-list").toggleClass("animated fadeIn");
    });

    $(function () {
        let Bid = getUrl("article");
        show_date_time();
        $("[name='blog.id']").val(Bid);
        getBlogByUrlId(Bid);
    });

    function getBlogByUrlId(id) {
        $.ajax({
            url: "/blogs/" + id,
            type: "GET",
            success: function (result) {
                layer.closeAll();
                if (result.code === 200) {
                    setBlog(result.data);
                    Prism.highlightAll(false);
                    if (result.data.commentable) {
                        getComment($.cookie('userTicket'));
                    } else {
                        $("#comment-form").remove();
                        $("#comment-container").remove();
                    }
                }
                layer.msg(result.msg);
            },
            error: function (obj) {
                layer.closeAll();
                layer.log("评论加载失败！");
            }
        });

        function setBlog(obj) {
            $("#blog-title").text(obj.title);
            $("#content").text(obj.content);
            $("#blog-views").text(obj.views);
            $("[name='blog.id']").val(obj.id);

            editormd.markdownToHTML("editormd-view", {
                htmlDecode: "style,script,iframe",
                tocm: true,
                tocContainer: "#custom-toc-container",
                emoji: true,
                taskList: true,
                // codeFold : true,
                previewCodeHighlight: false,// 关闭预览 HTML 的代码块高亮，默认开启
                tex: true, //默认不解析
                flowChart: true, //默认不解析
                sequenceDiagram: true //默认不解析
            });

            $("#blog-updateTime").text(obj.updateTime);

            setBlogUser(obj.userId);

            let tagsText = '';
            $.each(obj.tags, function (index, val) {
                tagsText += '<div class="ui basic teal left pointing label"> '
                    + val.name
                    + '</div>';
            });
            $('#tags').html(tagsText);
            $('#blog-firstPicture').attr("src", obj.firstPicture);

            $('#blog-flag').text(obj.flag);
            if (!obj.shareStatement) {
                $("#blogInfo-shareText").addClass('no');
            }
            $("#blogInfo-updateTime").text(obj.createTime);
            $("#blogInfo-createTime").text(obj.updateTime);
        };

        function setBlogUser(UId) {
            $.ajax({
                url: "/user/" + UId,
                type: "GET",
                success: function (result) {
                    layer.closeAll();
                    if (result.code === 200) {
                        let data = result.data;
                        $("#blog-user-avatar").attr('src', data.avatar);
                        $("#blog-user-nickname").text(data.nickname);
                        $("#blogInfo-user-nickname2").text(data.nickname);
                        $("#blogInfo-user-email").val(data.email);
                    } else {
                        layer.msg(result.msg);
                    }
                },
                error: function (obj) {
                    layer.log("error，也许您的网络有问题");
                }
            });
        }
    };


    //评论表单验证reply-form
    $('div[id$="form"]').form({
        fields: {
            title: {
                identifier: 'content',
                rules: [{
                    type: "empty",
                    prompt: "提示：请输入评论内容"
                }]

            },

            nickname: {
                identifier: 'nickname',
                rules: [{
                    type: "empty",
                    prompt: "提示：请输入你的昵称"
                }]
            },

            email: {
                identifier: 'email',
                rules: [{
                    type: "email",
                    prompt: "请填写正确的邮箱地址"
                }]
            }

        }
    });

    //#QQ失去焦点  取 #QQ值  请求返回josn ->  name=avatar  #nickname
    // 失去焦点
    $('#QQ').blur(function () {
        let QQ = $("#QQ").val();
        $.ajax({
            url: "https://api.usuuu.com/qq/" + QQ,
            type: "GET",
            dataType: "json",
            success: function (result) {
                if (result.code == 200) {
                    let data = result.data;
                    $("[name='nickname']").val(data.name);
                    $("[name='email']").val(data.qq + "@qq.com");
                    $("#avatar").attr('src', data.avatar);
                }
            }, error() {
                $("#avatar").attr('src', "/images/avatar/1.png");
            }
        });
    });

    function getQQ(e) {
        let QQ = $(e).val();
        $.ajax({
            url: "https://api.usuuu.com/qq/" + QQ,
            type: "GET",
            dataType: "json",
            success: function (result) {
                if (result.code == 200) {
                    let data = result.data;
                    //头像显示
                    $("#reply-avatar").attr("src", data.avatar);
                    $("[name='reply.nickname']").val(data.name);
                    $("[name='reply.email']").val(data.qq + "@qq.com");
                }
            }, error() {
                $("#reply-avatar").attr('src', "/images/avatar/1.png");
            }
        });
    };
</script>

</html>